<template>
	<view style="height: 100vh;background-color: #F3F4F5;">
		<view class="tabBox flex_r_between">
			<view class="item" :class="{cc:type==index}" v-for="(item,index) in tabList" :key="index" @click="type=index">
				<view style="height: 80%;">
					{{item}}
				</view>
				<view class="line" v-show="type==index"></view>
			</view>
		</view>
		<view style="height: 80rpx;"></view>
		<scroll-view style="position: fixed;bottom: 0;top: 90rpx;" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
		 :refresher-threshold="100" refresher-background="#F3F4F5" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
		 @refresherrestore="onRestore" @refresherabort="onAbort" @scrolltolower="scrolltolower" :lower-threshold="80">
			<view class="listItem flex_r_between" v-for="(item,index) in dataList" :key="index" @click="$linkTo('./Capital_details_detail?operation_id='+item.operation_id)">
				<view class="leftnum" :class="{col_DB1B22:item.is_minus==0?true:item.is_minus==2?true:false}">{{item.is_minus==0?'+':item.is_minus==2?'+':'-'}}{{item.amount}}</view>
				<view class="right flex_r_between" style="width:75%;">
					<view>
						<view class="title">{{item.title}}</view>
						<view class="time">{{$dateFormat(item.date_add*1000,'Y-m-d H:i:s')}}</view>
					</view>
					<view>
						<image style="width: 28rpx;height: 26rpx;" src="../../static/direction_right_gray.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="" style="height: 100rpx;text-align: center;line-height: 100rpx;color: #777777;">
				没有更多了...
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				triggered:false,
				type: 0,
				tabList: [
					'全部',
					'消费',
					'充值',
					'提现',
					'赚钱'
				],
				page:1,
				dataList:[],
			};
		},
		watch:{
			type:function(val,oldVal){
				if(val!=oldVal){
					this.dataList=[]
					this.page=1
					this.userfinance(this.page)
				}
			}
		},
		onLoad() {
			// this._freshing = false;
			// setTimeout(() => {
			// 	this.triggered = true;
			// }, 1000)
			this.userfinance(this.page)
		},
		methods: {
			userfinance(page){
				this.$request('/app/user/finance','post',{
					access_token:uni.getStorageSync('access_token').replace(/^\"|\"$/g,''),
					type:this.type,
					page:page
				}).then(res=>{
					this.dataList=[...this.dataList,...res.content]
				})
			},
			scrolltolower(){
				this.page++
				console.log(this.page)
				this.userfinance(this.page)
			},
			onPulling(e) {
				console.log("onpulling", e);
			},
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 3000)
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				console.log("onRestore");
			},
			onAbort() {
				console.log("onAbort");
			}
		}
	}
</script>

<style lang="scss">
	@import url("@/static/css/flex.css");
	
	.listItem{
		width: 100%;
		height: 120rpx;
		background: #FFFFFF;
		border-bottom: 1px solid #DDDDDD;
		padding: 0 34rpx 0 40rpx;
		box-sizing: border-box;
		.leftnum{
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #559E00;

		}
		.col_DB1B22{
			color: #DB1B22;
		}
		.right{
			.title{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;

			}
			.time{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #9DA5A8;

			}
		}
	}
	.tabBox {
		width: 100%;
		height: 80rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 0px 0px #DDDDDD;
		position: fixed;
		top: 0;

		.item {
			width: 20%;
			height: 100%;
			text-align: center;
			font-size: 26rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 400;
			color: #111111;
			line-height: 80rpx;

			.line {
				width: 38rpx;
				height: 4rpx;
				background: #DB1B22;
				border-radius: 2rpx;
				margin: auto;
			}
		}
		.cc{
			font-weight: 500;
		}
	}
</style>
